/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useRef, useEffect } from 'react';
import { Space } from 'antd';
import ProForm, { ProFormDigit } from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';

interface KBEDITTABLE {
  value: string;
  onSave: (value: { notice_percentage: string }) => void;
}

const KbEditTable = ({ value, onSave }: KBEDITTABLE) => {
  const formRef = useRef<ProFormInstance>();
  const [isEdit, setIsEdit] = useState<boolean>(false);
  const onCannel = () => setIsEdit(false);
  const onEditChange = () => setIsEdit(true);
  const onSubmit = () => formRef.current?.submit();
  const onEditSave = async (values: { notice_percentage: string }) => onSave(values);
  useEffect(() => {
    onCannel();
  }, [value]);
  return (
    <>
      {isEdit ? (
        <ProForm
          formRef={formRef}
          submitter={false}
          onFinish={onEditSave}
          initialValues={{ notice_percentage: value }}
        >
          <Space direction='vertical'>
            <ProFormDigit name='notice_percentage' min={0} max={100}></ProFormDigit>
            <Space>
              <a onClick={onSubmit}>保存</a>
              <a onClick={onCannel}>取消</a>
            </Space>
          </Space>
        </ProForm>
      ) : (
        <Space direction='vertical'>
          <span>
            {value}% {value == '25' ? '(默认)' : ''}
          </span>
          <a onClick={onEditChange}>操作</a>
        </Space>
      )}
    </>
  );
};

export default KbEditTable;
